<template>
    <div class="lifeBox">
        <ul class="lifeList">
          <li v-for="(item,index) in odata">
            <router-link tag="div" :to="'lifeArticle/'+index" @click.native="lifeArticle">
            <img :src="require('./img/b'+(index+1)+'.jpg')">
            <h2>凡心所向，素履以往</h2>
            <p>那些你在深夜度过的书，那些你在深夜度过的书，那些你在深夜度过的书，那些你在深夜度过的书，那些你在深夜度过的书，{{index}}</p>
            </router-link>
          </li>

        </ul>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                odata:[1,2,3,4]
            }
        },
        methods:{
          lifeArticle:function (){
            this.$store.dispatch('openShow','lifeArticle');
          }
        }
    }
</script>

<style lang="Sass">
    .lifeBox{width: 100%; padding-top: 2rem; padding-bottom: 3rem;

      .lifeList{ list-style: none; width: 100%;

        li{padding: 0.5rem 0.5rem 0 0.5rem; box-sizing:border-box; background: #fff; margin-top: .5rem;

          img{ width: 100%;  height: 8rem;}
          h2{ font-size: .7rem; color: #333; line-height: 1rem;}
          p{font-size: .65rem; color: #666; text-align: justify; padding: 0 0 0.5rem 0;}
        }
      }
    }
</style>